<template>
  <div class="info_main mt-5 ml-5">
    <!--    搜素框  -->
    <div class="row" >
      <div class="col-md-2">
<!--        <el-button @click="toggleSelection()">取消选择</el-button>-->
        <el-select v-model="fiter_check" placeholder="选择审核情况..." @change="changecheck">
          <el-option label="审核通过" value="1"></el-option>
          <el-option label="审核不通过" value="2"></el-option>
          <el-option label="未审核" value="0"></el-option>
        </el-select>
      </div>
      <div class="col-md-8">
        <el-input  type="text"
                   v-model="findName"
                   style="width: 500px;"
                   placeholder="请输入用户名..."
                   clearable
                   @keyup.enter.native="searchByName">
        </el-input>
        <el-button type="primary" icon="el-icon-search" @click="searchByName()" class="ml-3" plain>搜索</el-button>
        <el-button type="info" icon="el-icon-delete" @click="clearFindInput()" class="ml-3">重置</el-button>
      </div>
      <!--      添加按钮-->
      <div class="col-md-1" align="right">
<!--        <el-button type="primary" @click="addOpen()" plain><i class="el-icon-plus" ></i>添加</el-button>-->
      </div>
    </div>
    <div class="show_data mt-4">
      <el-table
          ref="multipleTable"
          v-horizontal-scroll="'always'"
          show-overflow-tooltip
          :data="showData"
          style="width: 100%"
          :cell-style="{color: '#666', fontFamily: 'Arial',fontSize:'17px'}"
          :header-cell-style="{background:'whitesmoke', fontFamily:'Helvetica',fontSize:'20px'}"
          height="700"
          @selection-change="handleSelectionChange"
          tooltip-effect="dark"
          :default-sort = "{prop: 'date', order: 'descending'}">
        <el-table-column
            type="selection"
            width="50">
        </el-table-column>
        <el-table-column
            fixed
            prop="register_time"
            label="注册时间"
            width="250">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.register_time }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="user_name"
            label="用户名"
            width="120">
        </el-table-column>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="用户名：">
                <span>{{ props.row.user_name }}</span>
              </el-form-item>
              <el-form-item label="性别：">
                <span>{{ props.row.sex }}</span>
              </el-form-item>
              <el-form-item label="籍贯：">
                <span>{{ props.row.city }}</span>
              </el-form-item>
              <el-form-item label="邮箱：">
                <span>{{ props.row.email }}</span>
              </el-form-item>
              <el-form-item label="爱好：">
                <span>{{ props.row.hobby }}</span>
              </el-form-item>
              <el-form-item label="个人介绍：">
                <span>{{ props.row.profile }}</span>
              </el-form-item>
              <el-form-item label="个人头像：" v-show="props.row.img!='default_user_img.jpg'">
                <img :src="'/api/storage/user_img/'+props.row.img"
                     style="width:30%;height:30%;object-fit:contain;border-radius: 2px"  alt="...">
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
            prop="ifcheck"
            label="审核情况"
            width="150"
            column-key="ifcheck">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.ifcheck==1" disable-transitions type="success">
              <span class="typeClass">审核通过</span>
            </el-tag>
            <el-tag v-else-if="scope.row.ifcheck==2" disable-transitions type="danger">
              <span class="typeClass">审核不通过</span>
            </el-tag>
            <el-tag v-else-if="scope.row.ifcheck==0" disable-transitions type="primary">
              <span class="typeClass">未审核</span>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="identity"
            label="身份"
            width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.identity==1" disable-transitions type="success">
              <span class="typeClass">学长学姐</span>
            </el-tag>
            <el-tag v-else-if="scope.row.identity==2" disable-transitions type="danger">
              <span class="typeClass">老师</span>
            </el-tag>
            <el-tag v-else-if="scope.row.identity==0" disable-transitions type="primary">
              <span class="typeClass">学生</span>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别"
            width="120">
        </el-table-column>
        <el-table-column
            prop="credit"
            label="积分"
            width="120">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="240">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="edit(scope.$index, scope.row)">
              <span class="btnfontClass" >编辑</span>
            </el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">
              <span class="btnfontClass" >删除</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页-->
      <div class="pagin mt-5 mb-5">
        <el-pagination
            @current-change="handleCurrentChange"
            :current-page="userContainerPage"
            :page-size="userContainerSize"
            layout="total,prev, pager, next"
            :total=total>
        </el-pagination>
      </div>

      <!--编辑弹窗-->
      <el-dialog
          title="编辑用户信息"
          :visible.sync="editdialogVisible"
          width="45%"
          @close="handleCloseEdit">

        <!--        编辑表单-->
        <el-form ref="PersonBasic" :model="PersonBasic" label-width="100px" :before-close="closeDivEdit">

          <form>
            <!--          个人基本信息-->
            <div class="form-group">
              <label for="inputUsername"><psan style="color: crimson;font-size: 18px;">* </psan>用户名</label>
              <input type="text" class="form-control " id="inputUsername" v-model="PersonBasic.user_name" required>
            </div>
            <div class="form-row">
              <div class="form-group col-md-6">
                <label for="inputBirthday">生日</label>
                <input type="date" class="form-control" id="inputBirthday" v-model="PersonBasic.birthday">
              </div>
              <div class="form-group col-md-6">
                <label for="inputSex">性别</label>
                <select  class="form-control" id="inputSex" v-model="PersonBasic.sex">
                  <option selected>男</option>
                  <option>女</option>
                </select>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-md-6">
                <label for="inputEmail">邮箱</label>
                <input type="email" class="form-control" id="inputEmail" v-model="PersonBasic.email">
              </div>
              <div class="form-group col-md-6">
                <label for="inputCity">籍贯</label>
                <input type="text" class="form-control" id="inputCity" v-model="PersonBasic.city">
              </div>
            </div>
            <div class="form-group">
              <label for="inputHobby">爱好</label>
              <input type="text" class="form-control " id="inputHobby" v-model="PersonBasic.hobby">
            </div>
            <div class="form-group">
              <label for="inputProfile">个人简介</label>
              <textarea class="form-control" id="inputProfile" placeholder="简单介绍下自己吧~~"  v-model="PersonBasic.profile"></textarea>
              <small id="InfoHelp" class="form-text text-muted">
                （1-200字）
              </small>
            </div>
          </form>

        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="editSave()">修 改</el-button>
          <el-button @click="openCancelEdit">取 消</el-button>
        </span>
      </el-dialog>


    </div>
  </div>
</template>

<script>
import {getAllUserInfo,updateUser_Basic,deleteUserByUserID} from '@/api/User'

export default {
  name: "information_main",
  data() {
    return {
      //筛选相关
      fiter_check:'',
      //搜索相关功能
      findName:'',
      userContainerPage:0, // 分页的数据：当前页数
      userContainerSize:0, // 分页的数据：每页的数量
      total:0,
      UserData: [],
      showData:[],
      copyData:[],
      search_info:[],  //存放搜索到的容器
      multipleSelection: [],
      //  编辑功能相关
      editdialogVisible:false,
      PersonBasic:{
        user_id:'',
        user_name:'',
        birthday:'',
        sex:'',
        email:'',
        city:'',
        hobby:'',
        profile:'',

      },
      formLabelWidth: '100px',






    }
  },

  methods: {
    //获取全部用户个人基本信息
    init(){
      getAllUserInfo({}).then(res=>{
        this.UserData=res.data;
        this.copyData=res.data;
        this.getShowUser();
      })

    },
    getShowUser(){

      this.userContainerSize=parseInt(10);
      this.showData = this.UserData.slice((this.userContainerPage - 1) * this.userContainerSize, this.userContainerPage * this.userContainerSize);
      this.total=parseInt(this.UserData.length);

    },
    //根据管理员名进行搜索
    searchByName(){

      var search=this.findName;
      if(search==""||search==null)
      {
        this.$msg.error('输入框不能为空！');
        this.init();
      }
      else {
        //执行本地过滤
        var search_list=this.copyData;
        this.search_info=[];  //装搜索结果的容器
        for(let i=0;i<search_list.length;i++)
        {
          if(search_list[i].user_name.indexOf(search)>=0)
          {
            this.search_info.push(search_list[i]);
          }
        }
        if(this.search_info.length==0)
        {
          this.$msg.error('未找到相关结果,刷新一下~');
        }
        this.UserData=this.search_info;
        //分页
        this.userContainerPage=parseInt(1);
        this.getShowUser();

        //清空搜索框
        // this.findName="";
      }

    },
    //  数据筛选
    changecheck(){

      var search=this.fiter_check;
      //执行本地过滤
      var search_list=this.copyData;
      this.search_info=[];  //装搜索结果的容器
      for(let i=0;i<search_list.length;i++)
      {
        if(search_list[i].ifcheck==search)
        {
          this.search_info.push(search_list[i]);
        }
      }
      if(this.search_info.length==0)
      {
        this.$msg.error('未找到相关结果,刷新一下~');
      }
      this.UserData=this.search_info;
      //分页
      this.userContainerPage=parseInt(1);
      this.getShowUser();


    },
    //分页
    //page改变时的回调函数，参数为当前页码
    handleCurrentChange(val) {

      console.log(`当前页: ${val}`);
      this.userContainerPage= parseInt(val);
      this.getShowUser();

    },
    //编辑用户基本信息  打开编辑弹窗
    edit(index, row) {

      this.editdialogVisible=true;

      this.PersonBasic.user_name=row.user_name;
      this.PersonBasic.birthday=row.birthday;
      this.PersonBasic.sex=row.sex;
      this.PersonBasic.email=row.email;
      this.PersonBasic.city=row.city;
      this.PersonBasic.hobby=row.hobby;
      this.PersonBasic.profile=row.profile;
      this.PersonBasic.user_id=row.user_id;

    },
    //提交数据 修改
    editSave()
    {

      //再次确认
      this.$confirm('确认修改?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.updateSave();

      }).catch(() => {
        this.$msg.error("修改失败！");
      });


    },
    //连接后端  进行修改
    updateSave(){

      var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;

      if(this.PersonBasic.user_name.length===0){
        this.$msg.warning('用户名不能为空！');
        return false;
      }
      if(this.PersonBasic.email != null){
        if(!reg.test(this.PersonBasic.email))
        {
          this.$msg.warning('邮箱格式不正确！');
          return false;
        }
      }
      if(this.PersonBasic.profile!=null){
        if(this.PersonBasic.profile.length>200){
          this.$msg.warning('个人介绍不能超过200字！');
          return false;
        }
      }
      updateUser_Basic({
        PersonBasic:this.PersonBasic,
        user_name:this.PersonBasic.user_name,
        user_id:this.PersonBasic.user_id
      }).then(res=>{
        if(res.data.code==1){
          this.$msg.success('修改成功！');
          this.editdialogVisible=false;
          this.init();
        }else if(res.data.code==-1){
          this.$msg.warning('用户名已存在！');
          this.PersonBasic.username="";
        }
        else{
          this.$msg.error('修改失败！');
        }
      })


    },
    //删除
    handleDelete(index, row) {

      //再次确认
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.deleteSave(row.user_id);

      }).catch(() => {
        this.$msg.error("取消删除！");
      });

    },
    //连接后端，进行删除
    deleteSave(user_id){
      deleteUserByUserID({
        user_id:user_id
      }).then(res=>{
        if(res.data.code==1){
          this.$msg.success("删除成功！");
        }else{
          this.$msg.error("删除失败！");
        }
        this.init();
      })
    },
    //关闭修改的弹窗
    openCancelEdit(){
      this.editdialogVisible = false
      // 点击取消按钮的时候清除输入框中的内容 清除验证
      //  this.$nextTick获取了节点之后进行操作
      this.$nextTick(() => {
        // form对应你写的<el-form ref="form"></el-form>
        this.$refs["PersonBasic"].resetFields();
      });
    },
    closeDivEdit(){
      this.$nextTick(() => {
        // form对应你写的<el-form ref="form"></el-form>
        this.$refs["PersonBasic"].resetFields();
      });
    },
    //清空搜索框
    clearFindInput(){
      this.findName="";
      this.fiter_check="";
      this.init();
    },
    handleCloseEdit(){
      this.$nextTick(() => {
        // form对应你写的<el-form ref="form"></el-form>
        this.$refs["PersonBasic"].resetFields();
      });
    },
    //取消选择
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },



  },
  created() {

    let _this=this;

    _this.userContainerPage=parseInt(1);

    _this.init();

    _this.$refs.table.doLayout();

  },
}
</script>

<style scoped>
.btnfontClass{
  font-size: 15px;
}
.el-pagination {
  text-align: center;
}
.typeClass{
  font-size: 14px;
}
/*表格展开功能样式*/
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
